<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本用法_下拉框</title>
</head>
<body>

<div id="app">
    <!--
    <option>是备选项，如果含有value属性，v-model就会优先匹配value的值；如果没有，就会直接匹配<option>的text,
    比如选中第二项时，selected的值是js，而不是JavaScript。
    -->

    <select v-model="selected">
        <option>html</option>
        <option value="js">JavaScript</option>
        <option>css</option>
    </select>
    <p>所选择的项是：{{ selected }}</p>
</div>

<hr>

<div id="app1">
    <select v-model="selected" multiple>
        <option>html</option>
        <option value="js">JavaScript</option>
        <option>css</option>
        <option>python</option>
    </select>
    <p>所选择的项是：{{ selected }}</p>
</div>

<hr>

<div id="app2">
    <select v-model="selected">
        <option v-for="option in options" :value="option.value">{{ option.text }}</option>
    </select>
    <p>所选择的项是：{{ selected }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">

    //下拉框
    /**
     * 选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选。
     **/

    //单选下拉框
    var app = new Vue({
            el: "#app",
            data: {
                selected: 'html',
            }
        });


    //多选下拉框
    /**
     * 其实所谓的多选下拉框其实就是给<selected>添加了multiple属性，注意此时v-model绑定的是一个数组，用法与多选复选框类似
     * **/
    var app1 = new Vue({
        el: "#app1",
        data: {
            selected: ['js', 'html']
        }
    });


    /**
     * 在业务中<option>经常用于v-for动态输出，value和text也是使用v-bind来进行动态输出的。
     * **/
    var app2 = new Vue({
        el: "#app2",
        data: {
            selected: 'html',
            options: [
                {
                    text: 'HTML',
                    value: 'html',
                },
                {
                    text: 'JavaScript',
                    value: 'js',
                },
                {
                    text: 'CSS',
                    value: 'css',
                },
            ]
        }
    })

</script>
</body>
</html>
